<!-- 检票员端 检票记录 -->
<template>
  <div class="container">
    <m-header :closeFn="() => this.$router.push({ name: 'tcheck', })">检票记录</m-header>
    <van-search
      v-model="searchVal"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div class="main">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="li-wrap" v-for="(item, i) in list" :key="i">
            <div class="field-wrap" v-for="(col, i) in colList" :key="i">
              <div class="label">{{ col.label }}</div>
              <div class="val">{{ item[col.key] }}</div>
            </div>
            <div class="btn-wrap">
              <div class="btn" @click="$router.push(`/cticketdetl`)">查看详情</div>
            </div>
          </div>
          <!-- <h1 v-for="(item, i) in list" :key="i">{{ item.shuttle_name }}</h1> -->
        </van-list>
      </van-pull-refresh>
    </div>
    
  </div>
</template>

<script>
import { List, PullRefresh, Search, } from 'vant'
import { formatDate, } from '@/utils/utils'

export default {
  name: '',
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Search.name]: Search,
  },
  computed: {
    
  },
  data() {
    return {
      colList: [
        { key: 'shuttle_name', label: '班车名称', },
        { key: 'packag_type_name', label: '套票类型', },
        { key: 'ticket_typall_name', label: '票种', },
        { key: 'carNumber', label: '车牌号', },
        { key: 'scanTime', label: '扫码时间', },
        { key: 'passengers_name', label: '乘车人姓名', },
        { key: 'seat_no', label: '去程座位', },
        { key: 'seat_no_leave', label: '回程座位', },
      ],
      refreshing: false,
      loading: false,
      finished: false,
      
      page: 1,
      limit: 10,
      list: [],
      
      fakeList: [],

      searchVal: '',
    }
  },
  watch: {
    
  },
  created() {
    this.setFakeList()
  },
  methods: {
    
    setFakeList() {
      let list = [],
          firstName = ['王', '陈', '李', '宋', '黄', '赵', '程', '沈', '金', '龙', '方', '韩', '徐', '古', '林', ],
          lastName = ['敏', '明', '红', '华', '文', '盈', '乐', '辉', '琴', ],
          startTime = new Date(2023, 7, 1, 7, 35).getTime()

      for(let i = 0, len = 15; i < len; i++) {
        let n = len - i + 5
        startTime -= (this.randomNum(15, 30) * 1000)
        list.push({
          shuttle_name: '智城1号',
          packag_type_name: '往返套票',
          ticket_typall_name: '月票',
          carNumber: '粤E14785',
          scanTime: formatDate(new Date(startTime), 'YYYY-MM-DD HH:mm:ss'),
          passengers_name: `${firstName[this.randomNum(0, 14)]}${this.randomNum(0, 1) ? '小' : ''}${lastName[this.randomNum(0, )]}`,
          seat_no: n,
          seat_no_leave: n,
        })
      }

      this.fakeList = list
    },

    onSearch() {
      this.list = []
      this.onRefresh()
      this.loading = true
    },
    onLoad() {
      this.getListData()
    },
    onRefresh() {
      this.page = 1
      this.finished = false
      this.getListData()
    },
    randomNum(min, max) {
      switch(arguments.length) {
        case 1:
          return parseInt((Math.random() * min + 1).toString(), 10)
          break
        case 2:
          return parseInt((Math.random() * (max - min + 1) + min).toString(), 10)
          break
        default:
          return 0
          break
      }
    },

    getListData() {
      let { page, limit, finished, } = this
      
      if(finished) return
      let timer = setTimeout(() => {
      
        if(page === 1) this.list = []
        let start = (page - 1) * limit,
            list = [ ...this.fakeList, ].splice(start, limit)

        this.loading = false
        this.refreshing = false
        this.list = [ ...this.list, ...list, ]
        this.finished = this.list.length === this.fakeList.length

        if(!this.finished) this.page++

        clearTimeout(timer)
      }, this.randomNum(500, 1000))
    },
  },
}
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: calc(100% - 50px);
  box-sizing: border-box;
  overflow: auto;

  >.main {
    height: unset;
    font-size: 14px;
    overflow: auto;

    .li-wrap {
      margin: 15px;
      padding: 15px;
      border-radius: 8px;
      background: #fff;

      >.field-wrap {
        display: flex;
        margin-bottom: 15px;

        >.label {
          min-width: 6.5em;
          color: #808080;
        }

        >.val {
          flex: 1;
        }
      }

      >.btn-wrap {
        display: flex;
        justify-content: flex-end;

        >.btn {
          color: rgb(40, 130, 254);
        }
      }
    }
  }
}

.container {
  height: 100vh;
}
</style>